<template>
  <div style="">
    <!-- <span style="color: #409EFF;margin-left: 10px">菜单管理</span> -->
    <el-row>
      <el-col style="padding: 20px;">
        <el-table
          ref="multipleTable"
          :data="tableData"
          height="700"
          style="width: 100%; margin-top: -30px"
          class="table"
          border
        >

          <el-table-column
            label="序号"
            width="80"
            header-align="center"
            align="center"
            type="index"
          />
          <el-table-column
            prop="name"
            label="菜单名称"
            min-width="120"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="describe"
            label="描述"
            min-width="300"
            header-align="center"
            align="center"
          />
          <el-table-column label="使用状态" min-width="80" header-align="center" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type=='1'">使用中</span>
              <span v-else-if="scope.row.type=='0'">已禁用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="120"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-radio-group v-if="scope.row.flag =='1'" v-model="scope.row.type" @change="changeradio(scope.$index, scope.row)">
                <el-radio label="1">使用中</el-radio>
                <el-radio label="0">已禁用</el-radio>
              </el-radio-group>
              <el-radio-group v-else v-model="scope.row.type">
                <el-radio disabled label="1">使用中</el-radio>
                <el-radio disabled label="0">已禁用</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          style="float: right"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { findAllMenu, saveTriageMenu} from  '@/api/back-management/triage-manage/menu_management.js'
  export default {
    name: 'MenuManage',
    components: {  },
    data() {
      return{
        tableData: [],
        /* 表格分页参数*/
        // currentPage: 1,
        // pagesize: 10,
        // pageTotal: 0,
        /* 用户信息 */
        userId: this.$store.getters.userId,
        hospitalId: this.$store.getters.hospitalId,
        apiToken: this.$store.getters.apiToken
      }
    },
    created() {
      this.findAllMenu()
    },
    methods: {
      /* 操作 */
      changeradio(index, row) {
        const obj = {}
        obj.hospitalId = Number(this.hospitalId)
        obj.name = row.name
        obj.type = row.type
        obj.describe = row.describe
        obj.id = row.id
        obj.flag = row.flag
        saveTriageMenu(obj).then(res => {
          if (res.code === 9999) {
            this.$message({
              type: 'error',
              message: '修改失败'
            })
          } else {
            this.$message({
              type: 'success',
              message: '修改成功！'
            })
            this.findAllMenu()
          }
        }).catch(err => {
          this.$message.error(err)
        })
      },
      findAllMenu(){
        let data = {
          hospitalId: this.hospitalId
        }
        findAllMenu(data).then(res => {
          if(res.code === 0){
            this.tableData = res.data
            // this.pageTotal = res.data
          }
        }).catch(err => {
          this.$message.error(err)
        })
      },

      // // 分页尺寸改变
      // handleSizeChange(size) {
      //   this.pagesize = size
      // },
      // // 分页换页
      // handleCurrentChange(currentPage) {
      //   this.currentPage = currentPage
      // }
    }
  }
</script>

<style>
</style>
